<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Panel - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="/static/js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/static/js/themes/icon.css">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.easyui.min.js"></script>
</head>
<body>

<!--<div style="margin:20px 0 10px 0;">
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('open')">Open</a>
    <a href="#" class="easyui-linkbutton" onclick="javascript:$('#p').panel('close')">Close</a>
</div>-->
<div id="cc" class="easyui-layout" fit = "true">
    <div data-options="region:'west',title:'West'" style="width:300px;">

        <div id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit = "true">
            <div title="工具" data-options="iconCls:'icon-application-cascade'" >
                <ul class="easyui-tree wu-side-tree">
                   <li iconCls="icon-chart-line"><a href="javascript:void(0)" data-icon="icon-chart-line" data-link="/static/shellConfig.html" iframe="1">shell连接配置</a></li>
                    <li iconCls="icon-chart-line"><a href="javascript:void(0)" data-icon="icon-chart-line" data-link="/static/ConfigShellButton.html" iframe="1">配置shell功能按钮</a></li>
                    <li iconCls="icon-chart-line"><a href="javascript:void(0)" data-icon="icon-chart-line" data-link="/static/ConfigAllTemplate.html" iframe="1">ConfigAll模板</a></li>
                    {{/*<li iconCls="icon-chart-line"><a href="javascript:void(0)" data-icon="icon-chart-line" data-link="pages/analyse/AttributeEval.html" iframe="1">属性计算</a></li>*/}}
                </ul>
            </div>
            <div title="服务器管理工具" data-options="iconCls:'icon-application-cascade'" >
                <ul class="easyui-tree wu-side-tree">
                    <li iconCls="icon-chart-line"><a href="javascript:void(0)" data-icon="icon-chart-line" data-link="/static/shellConfig.html" iframe="1">shell连接配置</a></li>
                    {{/*<li iconCls="icon-chart-line"><a href="javascript:void(0)" data-icon="icon-chart-line" data-link="pages/analyse/AttributeEval.html" iframe="1">属性计算</a></li>*/}}
                </ul>
            </div>
        </div>

    </div>
    <div data-options="region:'center',title:'center title'">
        <div id="p" class="easyui-panel"  fit = "true">
            <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
                <div title="首页" data-options="closable:false,iconCls:'icon-tip'">
                    <iframe scrolling="auto" frameborder="0"  src="http://127.0.0.1:8888" style="width:100%;height:100%;"></iframe>
                </div>
            </div>
            <iframe scrolling="auto" frameborder="0"  src="" style="width:100%;height:100%;"></iframe>
        </div>

    </div>
    <script type="text/javascript">
        $(function(){
            $('.wu-side-tree li').bind("click",function(){
                let myTarget = $(this).find('a');
                console.log(myTarget.attr('iframe'));
                let title = myTarget.text();
                let url = myTarget.attr('data-link');
                let iconCls = myTarget.attr('data-icon');
                let iframe = myTarget.attr('iframe')==1?true:false;

                addTab(title,url,iconCls,iframe);
            });
        })

        // /**
        // * Name 载入树形菜单
        // */
        // $('#wu-side-tree').tree({
        // 	url:'temp/menu.php',
        // 	cache:false,
        // 	onClick:function(node){
        // 		var url = node.attributes['url'];
        // 		if(url==null || url == ""){
        // 			return false;
        // 		}
        // 		else{
        // 			addTab(node.text, url, '', node.attributes['iframe']);
        // 		}
        // 	}
        // });
        //
        // /**
        // * Name 选项卡初始化
        // */
        // $('#wu-tabs').tabs({
        // 	tools:[{
        // 		iconCls:'icon-reload',
        // 		border:false,
        // 		handler:function(){
        // 			$('#wu-datagrid').datagrid('reload');
        // 		}
        // 	}]
        // });
        //
        /**
         * Name 添加菜单选项
         * Param title 名称
         * Param href 链接
         * Param iconCls 图标样式
         * Param iframe 链接跳转方式（true为iframe，false为href）
         */
        function addTab(title, href, iconCls, iframe){
            let tabPanel = $('#wu-tabs');
            if(!tabPanel.tabs('exists',title)){
                let content = '<iframe scrolling="auto" frameborder="0"  src="'+ href +'" style="width:99%;height:99%;"></iframe>';
                if(iframe){
                    tabPanel.tabs('add',{
                        title:title,
                        content:content,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                } else{
                    tabPanel.tabs('add',{
                        title:title,
                        href:href,
                        iconCls:iconCls,
                        fit:true,
                        cls:'pd3',
                        closable:true
                    });
                }
            }
            else
            {
                tabPanel.tabs('select',title);
            }
        }
        /**
         * Name 移除菜单选项
         */
        function removeTab(){
            let tabPanel = $('#wu-tabs');
            let tab = tabPanel.tabs('getSelected');
            if (tab){
                let index = tabPanel.tabs('getTabIndex', tab);
                tabPanel.tabs('close', index);
            }
        }
    </script>
</div>
</body>
</html>